<template>
  <div id="specialexhibition" class="specialexhibition">
    <div class="div-list">
      <el-scrollbar class="page-component__scroll">
        <dl class="dl1-specialexhibition" @click="showlayer(layerlist[0].layerurl)">
          <dd/>
          <dt>测试数据1</dt>
        </dl>
        <dl class="dl2-specialexhibition" @click="showlayer(layerlist[1].layerurl)">
          <dd/>
          <dt>测试数据2</dt>
        </dl>
        <dl class="dl3-specialexhibition" @click="showlayer(layerlist[2].layerurl)">
          <dd/>
          <dt>测试数据3</dt>
        </dl>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'SpecialExhibition',
    data() {
      return {
        layerlist: [
          { layerurl: '11' }, { layerurl: '22' }, { layerurl: '33' }
        ]
      }
    },
    methods: {
      // 图层控制
      showlayer(args) {
           this.bus.$emit("onLayerChanged", "5eec7dd8530523292895f5cc");
          ///alert(args)
      }
    },
    computed: {
      ...mapState({
        mapService(state) {
          return state.eswyzt.mapService
        },
        /**
         * 比较
         * @param state
         * @returns {comparable|(function(*))|*}
         */
        comparable: function(state) {
          return state.eswyzt.comparable
        }
      })
    }
  }
</script>

<style>
  .page-component__scroll {
    height: 100%;
  }

  .page-component__scroll .el-scrollbar__wrap {
    overflow-x: auto;
  }
</style>

<style scoped>
  .specialexhibition {
    height: 100%;
    width: 100%;
  }

  .div-list {
    text-align: center;
    height: 100%;
    margin: 0 auto;
  }

  .div-list dl {
    color: #aaa;
    border: 1px solid #ccc;
    margin: 10px;
  }

  .div-list dl:hover {
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.5);
  }

  .div-list dd {
    width: 314px;
    height: 150px;
    margin: 6px auto;
  }

  .dl1-specialexhibition dd {
    background: url(../../../../assets/img/yzt/subjectLayer.png);
  }

  .dl2-specialexhibition dd {
    background: url(../../../../assets/img/yzt/subjectLayer.png);
  }

  .dl3-specialexhibition dd {
    background: url(../../../../assets/img/yzt/subjectLayer.png);
  }
</style>
